<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:adm="http://github.com/adminfaces"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">

<h:head>
    <title>PBA Project</title>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <link rel="shortcut icon" type="image/x-icon" href="#{resource['favicon/favicon.ico']}"/>
    <link rel="shortcut icon" type="image/x-icon" href="#{resource['favicon/favicon-16x16.png']}" sizes="16x16"/>
    <link rel="shortcut icon" type="image/x-icon" href="#{resource['favicon/favicon-32x32.png']}" sizes="32x32"/>
    <link rel="shortcut icon" type="image/x-icon" href="#{resource['favicon/favicon-96x96.png']}" sizes="96x96"/>
    <link rel="shortcut icon" type="image/x-icon" href="#{resource['favicon/favicon-144x144.png']}" sizes="144x144"/>
    <meta name="theme-color" content="#444"/>
    <meta name="mobile-web-app-capable" content="yes"/>

    <style type="text/css">
        body .load-bar {
            margin-top: -20px;
        }

        /* below css hides growls in small screens and makes messages visible */
        @media (max-width: 768px) {

            body div.ui-growl {
                display: none;
            }

            body div.ui-messages {
                display: block;
            }

        }

        /* below css hides messages in medium/big devices and makes growl visible in such devices */
        @media (min-width: 769px) {
            body div.ui-growl {
                display: block;
            }

            body div.ui-messages {
                display: none;
            }
        }

        body.login-page {
            background-color: transparent;
        }

        html {
            background: url(#{resource[ 'images:login-bg.jpg' ]}) no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
    </style>
</h:head>

<h:body styleClass="hold-transition login-page">
    <f:loadBundle var="msg" basename="admin"/>
    <p:autoUpdate/>
    <div id="loader" class="load-bar" style="display: none">
        <div class="bar"/>
        <div class="bar"/>
        <div class="bar"/>
    </div>

    <p:dialog id="adminStatusDialog" modal="true" widgetVar="statusDialog" draggable="false" closable="false"
              resizable="false" responsive="true" showHeader="false" appendTo="@(body)">
        <p:graphicImage library="images" name="#{adminConfig.loadingImage}"/>
    </p:dialog>

    <div class="login-box">
        <div class="login-logo">
            <p:link href="index.xhtml"><b>PBA</b>Project</p:link>
        </div>
        <div class="box login-box-body">
            <h:form>
                <p class="login-box-msg">Sign in to start your session</p>
                <p:outputLabel value="#{msg['msg.login.error']}" style="color: red;"
                               rendered="${!empty param['error']}"/>
                <p:focus/>
                <div class="form-group has-feedback">
                    <input name="username" class="form-control" placeholder="#{msg['msg.username']}"
                           required="required"/>
                    <i class="fa fa-user form-control-feedback" style="font-size: 18px"/>
                </div>
                <div class="form-group has-feedback">
                    <input type="password" name="password" class="form-control" placeholder="#{msg['msg.password']}"
                           required="required"/>
                    <i class="fa fa-lock form-control-feedback" style="font-size: 18px"/>
                </div>
                <div class="row">
                    <p:spacer/>
                    <div class="col-xs-12">
                        <input type="submit" value="#{msg['button.login']}" class="btn btn-success btn-block"
                               onclick="showBarIndex()"/>
                    </div>
                </div>
            </h:form>
            <div>
                <a href="#">I forgot my password</a><br/>
                <a href="#" class="text-center">Register a new membership</a>
            </div>

        </div>
    </div>

    <adm:ripple/>
    <h:outputScript library="js" name="admintemplate.js" target="head"/>
    <h:outputScript library="js" name="index.js" target="head"/>

</h:body>
</html>